<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ include file="/common/taglibs.jsp" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>数据采集</title>
    <%@ include file="/common/util.jsp" %>
    <script type="text/javascript">
        $(function () {

        });
        //亮灯时间段分布
        function lightTime() {
            $("#lightTime").show();
            $("#everyHour").hide();
        }

        //每小时亮灯时间分布
        function everyHour() {
            // var collectDataDetails;
            if ($("#everyHour").children().size()) {
                $("#everyHour").show();
                $("#lightTime").hide();
            } else {
                $.ajax({
                    contentType: "application/json",
                    url: "everyHour.shtml?gatewayid=${gatewayid }&sensorid=${sensorid }&channelid=${channelid }&startTime=${startTime }&endTime=${endTime }",
                    dataType: "json",
                    success: function (data) {
                        _.each(data, function (item) {
                            $("#everyHour").append("<tr><td>" + item.spantime + "</td><td>" + item.activetime + "</td></tr>")
                        });
                        $("#everyHour").show();
                        $("#lightTime").hide();
                    }
                })
            }
        }
    </script>
</head>
<body class="modal_bg">
<div class="modal_bg" style="display: block;width: 100%;">
    <div>
        <p style="padding-left: 2%;padding-top: 10px;"><a href="javascript:lightTime();">亮灯时间段</a> | <a
                href="javascript:everyHour();">每小时分布</a></p>
    </div>
    <table class="ui-jqgrid-htable list_table" style="width: 96%;">
        <thead>
        <tr>
            <th>时间区间</th>
            <th>总计时间（分钟）</th>
        </tr>
        </thead>
        <tbody id="lightTime">
        <c:forEach items="${gathers}" var="entity">
            <tr>
                <td>${entity.spantime}</td>
                <td>${entity.activetime}</td>
            </tr>
        </c:forEach>
        </tbody>
        <tbody id="everyHour">

        </tbody>
    </table>
</div>
</body>
</html>
